<a style="width:{95/steps.length}%" on:click="select(event, step)" href="{step.redirect?step.redirect:'#'+step.id}" class="{class_}">
    <span class="step">{index}</span>
    <span class="title">{@html step.title}</span>
    {#if passed }<i class="fa fa-check"></i>{/if}
    <div class="corner"></div>
</a>

<script>
    import _findWhere from 'underscore-es/findWhere';

    export default {
        data() {
            return {
                step: {
                    title: '',
                    index: 1
                },
                maxStep: 1,
                active: 1
            };
        },

        computed: {
            activeIndex({ active, steps }) {
                return steps.indexOf(_findWhere(steps, { id: active }));
            },
            passed({ index, activeIndex, maxStep }) {
                return index < maxStep && index !== activeIndex;
            },
            class_({ step, index, active, passed, $lastEditStep }) {
                const list = [];
                if (step.readonly) list.push('readonly');
                if (active === step.id) list.push('active');
                else {
                    if (index > $lastEditStep + 1) list.push('unseen');
                    if (passed) list.push('passed');
                }
                return list.join(' ');
            }
        },
        methods: {
            select(event, step) {
                if (step.redirect) return;
                event.preventDefault();
                if (step.readonly) return;
                this.fire('select', step);
                if (window.location.pathname.substr(0, 6) === '/edit/') {
                    const { id } = this.store.get();
                    window.history.pushState({ step, id }, '', `/edit/${id}/${step.id}`);
                }
            }
        },
        // eslint-disable-next-line
        onupdate({ changed, current }) {
            if (changed.activeIndex) {
                const step = current.steps[current.activeIndex];
                if (step) {
                    const { id, title } = this.store.get();
                    window.document.title = `${title} - ${id} - ${step.title} | Datawrapper`;
                }
            }
        }
    };
</script>
